<template>
  <div class="homeTopContainer">
      <div class="top">
          <!--<p class="time">{{myTime}}</p>-->
        <p class="time">总共走了{{pedometerNum}}步</p>
          <p class="call"><yd-icon name="call"  custom slot="icon" size=".38rem" color='#ffffff'></yd-icon></p>
          <div class="uPhoto">
              <img class="myphoto" :src="user">
          </div>
      </div>
      <div class="bottom">
          <p class="menu">
              <yd-icon name="weather"  custom slot="icon" size=".4rem" color='#000000'></yd-icon>
              <yd-icon name="sleep"  custom slot="icon" size=".4rem" color='#000000'></yd-icon>
              <yd-icon name="bike"  custom slot="icon" size=".4rem" color='#000000'></yd-icon>
              <yd-icon name="heart"  custom slot="icon" size=".4rem" color='#000000'></yd-icon>
          </p>
          <div class="btn"  @touchend="showMsg">
              <yd-icon class="earth" name="earth"  custom slot="icon" size=".82rem" color='#ffffff'></yd-icon>
                <p>打招呼</p>
                <div>
                    <span> {{onlineCount}} </span>人在线 &nbsp;<span> {{msgCount}} </span>人招呼你
                </div>
                <span class="msg">
                    <yd-icon name="sound"  custom slot="icon" size=".5rem" color='#ffffff'></yd-icon>
                </span>
          </div>
      </div>
    <!--<div class="pedometerNum" style="position: absolute;top: 1.3rem;z-index: 10;font-size: 16px;left: 50%;transform: translateX(-50%);color: #ffffff;">总共走了{{pedometerNum}}步</div>-->
  </div>
</template>
<style lang="less" scoped>
@import "~less/base";
 @import '~less/icon';
    .homeTopContainer{
        height: 7.4rem;
        width: 100%;
        position: relative;
        img{
            max-width: 100%;
            max-height: 100%;
        }
        .top{//上部文字
            height: 3.5rem;
            background-color: @background-a;
            width: 100%;
            .time{//时间日期
                display: inline-block;
                font-size: 14px;
                color: @color-c;
                width: 70%;
                height: 1.3rem;
                line-height: 1.3rem;
                text-align: center;
            }
            .call{//电话
                display: inline-block;
                width: 25%;
                height: 1.3rem;
                line-height: 1.3rem;
                text-align: right;
            }
          .uPhoto{//用户头像
              .myphoto{
                  height: 2.3rem;
                  border-radius: 50%;
                  border: .1rem solid @color-border3;
                  position: absolute;
                  top:2.2rem;
                  left: 50%;
                  margin-left: -1.15rem;
                  z-index: 100;
              }
          }
        }
        .bottom{//下方按钮部分
            height: 54%;
            .menu{//状态图标
                text-align: center;
                height: 50%;
                padding-top: .56rem;
                i{
                    line-height: 1.3rem;
                    margin:0 .4rem;
                    font-weight: bold;
                }
            }
            .btn{//下方按键部分
                width: 70%;
                height: 1.2rem;
                margin-left: 15%;
                background-color: @color-btnBack;
                border-radius:.6rem;
                position: relative;
                .earth{//地球图标
                    position: absolute;
                    top: 50%;
                    margin-top: -.44rem;
                    left: .2rem;
                }
                p,div{//文字总样式
                    height: .6rem;
                    line-height: .6rem;
                    color: @color-c;
                    margin-left: 1.2rem;
                }
                p{
                    font-size: 16px
                }
                div{//消息数量
                    letter-spacing:1px;
                }
                .msg{//声音符号
                    position: absolute;
                    right: 0;
                    top: 50%;
                    margin-top: -.25rem;
                    margin-right: .3rem;
                }
            }
            .btn:active{
                 box-shadow: 3px 3px 3px;
            }
        }
    }
</style>
<script>
export default {
  props:['myTime','user','msgCount','onlineCount'],
  methods:{
      showMsg(){
          this.$router.push({"name":"around"})
      }
  },
  data(){
    return {
      pedometerNum : null
    }
  },
  mounted(){
    setInterval(()=>{
      this.pedometerNum = this.$store.state.pedometer
    },500)
  }
}
</script>
